<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>JS</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        p{
            position: relative;
            top: 100px;
            z-index: 7;
            display: block;
            text-align: center;
            font-size: 30px;
            color:#99CCFF;
            font-weight: bold;
            transition: color 1s;
        }
        h5{
            margin-top: 20px;
            position: relative;
            top: 100px;
            z-index: 7;
            display: block;
            text-align: center;
            font-size: 30px;
            color:#FFFFCC;
            transition: color 1s;
        }
        #div1,#div2,#div3{
            position: absolute;
            width: 100%;
            height: 100%;
            transition: width 1s, background-color 1.5s;
        }
        #div1{
            float: left;
            z-index: 9;
            background-color: #99CCFF;
        }
        #div2{
            float: right;
            z-index: 5;
            background-color: #FFFFCC;
        }
        #div3{
            float: left;
            z-index: 1;
            background-color: #FFCCCC;
        }
        #box{
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100px;
            position: absolute;
            top: 600px;
        }
        button{
            border-radius: 5px;
            margin: 0 30px;
            cursor: pointer;
            border: none;
            outline:none;
            width: 200px;
            height: 100px;
            transition: background-color 1.5s;
        }
        #button1{
            position: relative;
            z-index: 10;
            background-color: white;
        }
        #button2{
            margin-left: 40px;
            position: relative;
            z-index: 6;
            background-color: #99CCFF;
        }
        #button3{
            margin-right: 40px;
            position: relative;
            z-index: 2;
            background-color: #FFFFCC;
        }
    </style>
</head>
<body>
    <script>
        var flag = 0;
        function recover1(){
            $("#div2").css("width","100%");
            setTimeout(recover2,800,1);
        }
        function recover2(){
            $("#div1").css("width","100%");
        }
        function color1(){
            $("#div3").css("background-color","#FF9966");
            $("#div2").css("background-color","#FFFF66");
            $("h5").css("color","#FFFF66");
            $("#button3").css("background-color","#FFFF66");
            $("#div1").css("background-color","#0099CC");
            $("p").css("color","#0099CC");
            $("#button2").css("background-color","#0099CC");
            flag=1;
        }
        function color2(){
            $("#div3").css("background-color","#FFCCCC");
            $("#div2").css("background-color","#FFFFCC");
            $("h5").css("color","#FFFFCC");
            $("#button3").css("background-color","#FFFFCC");
            $("#div1").css("background-color","#99CCFF");
            $("p").css("color","#99CCFF");
            $("#button2").css("background-color","#99CCFF");
            flag=0;
        }
        $(document).ready(function(){
            $("#button1").click(function(){
                $("#div1").css("width","0px");
            });
            $("#button2").click(function(){
                $("#div2").css("width","0px");
            });
            $("#button3").click(function(){
                setTimeout(recover1,300,1);
            });
            $("#div1,#div2,#div3").click(function(){
                if(flag==0) color1();
                else color2();
            });
        });
    </script>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    </div><p>P in this!</p>
    <h5>H in this!</h5>
    <div id="box">
        <button id="button2"></button>
        <button id="button1"></button>
        <button id="button3"></button>
    </div>
</body>
</html>